<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>标题</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="/Css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/Css/style.css" />

<script type="text/javascript" src="/bui/assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/highcharts/highcharts.js"></script>
<style type="text/css">
	.x-chart-legend{display: none;}
</style>
</head>
<body>
	<table class="table table-bordered table-hover definewidth m10" id="hib">
		<tr>
			<td width="15%" class="tableleft" style="text-align: center; height: 50px; line-height: 50px;" rowspan="2">
				点击右侧按钮查看：
			</td>
			<td width="60%" style="text-align: center; height: 50px; line-height: 50px;">
				<span th:each="time : ${yearMonth }">
					<button class="btn btn-primary" 
						type="button" 
						th:value="${time.aYear } + '-' + ${time.aMonth}"
						th:text="${time.aYear } + '-' + ${time.aMonth}"
					></button>
					&nbsp;&nbsp;&nbsp;&nbsp;
				</span>
			</td>
		</tr>
		<tr>
			<td>
				工作日预算： <input id="week1"  value="35" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
				周末预算：<input id="week2"  value="70" />
			</td>
		</tr>
	</table>
	<div class="detail-section" style="width : 100%;margin: 0 auto;">
		<div id="title" style="width : 80%;text-align: center;font-size: 24px;color: blue;margin: 15px;"></div>
		<div id="container1" style="width : 49%;margin: 0 auto;height: 60%;float: left;"></div>
		<div id="container2" style="width : 49%;margin: 0 auto;height: 60%;float: left;"></div>
	</div>
	<script type="text/javascript">
		//默认系统当前年份为参数年
		$(function() {
			$('button').click(function() {
				var time = this.getAttribute("value").split("-");
				var year = parseInt(time[0]);
				var month = parseInt(time[1]);
				var week1 = $('#week1').val();
				var week2 = $('#week2').val();
				var type = 1;
				
				$.post("/account/burn",{yearStr:year, monthStr:month, type:type, week1:week1, week2:week2},function(data){
					/** 统计的时间，yyyy-MM */
					var time = data.time;
					/** 统计出来的数据 */
					var useList = data.useList;
					/** 预算 */
					var budgetList  = data.budgetList;
					/** 每日预算，推荐每日的消费 */
					var dayBudget = data.dayBudget;
					/** 总的预算 */
					var sumBudget = data.sumBudget;
					/** 实际每天消费 */
					var dayUse = data.dayUse;
					/** 总的消费 */
					var sumUse = data.sumUse;
					/** 天数 */
					var days = data.days;
					/** 已经使用百分比 */
					var usePercent = data.usePercent;
					/** 实际的每日数据燃尽情况 */
					var useBurn = data.useBurn;
					/** 预计的每日数据燃尽情况 */
					var budgetBurn = data.budgetBurn;
					
					var x = [];
					var budget = [];
					var maxValue = 0;//判断最大的值
					for(var i = 0; i < budgetList.length; i++){
						x.push(budgetList[i].time.substring(8,10));
						budget.push(budgetList[i].account);
						maxValue = budgetList[i].account > maxValue ? budgetList[i].account : maxValue;
					}
					
					var use = [];
					for(var i = 0; i < useList.length; i++){
						use.push(useList[i].account);
						maxValue = useList[i].account > maxValue ? useList[i].account : maxValue;
					}
					
					var title1 = time + '餐饮类每日预算使用情况';
					var title2 = time + '餐饮类预算燃尽图';
					getChart1(x, use, budget, title1, maxValue + 30);
					getChart2(x, useBurn, budgetBurn, title2);
					//实际消费情况
					var myData = (sumBudget - sumUse);
					var msg = myData > 0 ? "<span style='color: green;'>(剩余)</span>":"<span style='color: red;'>(超出预算)</span>";
					$('#title').html(
						"总预算:" + 	sumBudget + "&nbsp;&nbsp;" + 
						"推荐每日使用:" + dayBudget + "&nbsp;&nbsp;" + 
						"实际总消费:" + sumUse + "&nbsp;&nbsp;" + 
						"实际每天消费:" + dayUse + "&nbsp;&nbsp;" + 
						"预算已使用:" + usePercent + "%&nbsp;&nbsp;" + 
						"剩余预算:" + (sumBudget - sumUse) 
						);
				});
			
			});
		});
		
		function getChart1(x, use, budget, title, maxValue){
			Highcharts.chart('container1', {
				chart: {
					alignTicks : false
				},
				title: {
						text: title
				},
				xAxis: [{
						categories: x,
						crosshair: true
				}],
				yAxis: [
					{ //使用
						labels: {format: '{value}', style: {color: Highcharts.getOptions().colors[0]}},
						title: {text: '使用/￥', style: {color: Highcharts.getOptions().colors[0]}},
						min : 0,
						max: maxValue
					},
					{ //预算
						labels: {format: '{value}', style: {color: Highcharts.getOptions().colors[1]}},
						title: {text: '预算/￥', style: {color: Highcharts.getOptions().colors[1]}},
						min : 0,
						max: maxValue,
						opposite: true
					}
				],
				tooltip: {
						shared: true
				},
				credits:{enabled: false}, // 禁用版权信息
				series: [{
						name: '使用',
						type: 'column',
						//yAxis: 1,
						data: use,
						tooltip: {
								valueSuffix: ' ￥'
						}
				}, {
						name: '预算',
						type: 'spline',
						yAxis: 1,
						data: budget,
						tooltip: {
								valueSuffix: '￥'
						}
				}]
			});
		}
		
		function getChart2(x, use, budget, title){
			var chart = Highcharts.chart('container2',{
				chart: {type: 'area'},
				title: {
						text: title
				},
				xAxis: {
						allowDecimals: false,
						categories: x,
						crosshair: true
				},
				yAxis: {title: {text: '预算燃尽图'}},
				tooltip: {
					shared: true
				},
				credits:{enabled: false}, // 禁用版权信息
				plotOptions: {
						area: {
								marker: {
										enabled: false,
										symbol: 'circle',
										radius: 2,
										states: {
												hover: {
														enabled: true
												}
										}
								}
						}
				},
				series: [{
						name: '实际预算剩余',
						data: use
				}, {
						name: '预测预算剩余',
						data: budget
				}]
		});
		}
		
	</script>
</body>
</html>

